<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>待审核商品列表</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css"/>
    <link rel="stylesheet" href="__CSS__/supplies/common.css"/>
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="__ASSETS__/css/cyrillic.css"/>
    <!--<link rel="stylesheet" href="__ASSETS__/css/ace.min.css" />-->
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css"/>
    <style>
        body{
            height: 100%;
            background: white;
        }
        .form-title {
            height: 40px;
            min-width: 60px;
            text-align: right;
        }
        .form-title1{
            height: 50px;
            width: 100px;
            text-align: right;
        }
        .checkHead table .form-value input{
            height: 34px;
            width: 200px;
        }
        #user_table tr td {
            vertical-align: inherit;
        !important;
        }

        .margin-l-20 {
            margin-left: 20px;
        }

        .margin-l-10 {
            margin-left: 10px;
        }

        .shop-img-style {
            width: 90%;
        }

        #user_table tr td {
            vertical-align: inherit;
        !important;
        }

        .hide {
            display: none;
        }

        .ds-in-b {
            display: inline-block;
        }

        .show {
            display: block;
        }
        img{
            width: 75px;
            height: 75px;
            max-width:75px;_width:expression(this.width > 75 ? "37.5px" : this.width);
        }
        .detail_a{
            cursor: pointer;
        }
        .my_skin .layui-layer-btn a{
            border-color: #999;!important;
            background-color: white;!important;
            color: #333;!important;
        }
        .table-responsive{
            height:calc(100% - 90px)
        }
        .bootstrap-table{
            height:100%
        }
        .fixed-table-container{
            height:calc(100% - 60px) !important;
        }
        .guige_table{
            width: 81%;
            margin-left: 100px;
            margin-top: -30px;
        }
        .guige_table thead tr{
            font-size: 15px;
            font-weight: bold;
            background-color: #5bc0de;
        }
        .guige_table tr {
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #999;
        }
        .form-horizontal .form-value input{
            border-radius: 0;
        }
    </style>
</head>
<body>
<div id="content">
    <!--搜索-->
    <div class="checkHead" style="padding-top: 10px;height: 90px;">
        <table class="checkHead-table" style="/*position: absolute;right: 0px;*/">
            <tr>
                <td class="form-title">
                    商品名称：
                </td>
                <td class="form-value">
                    <input v-model="search.name" type="text" class="search" placeholder="请输入商品名称"/>
                </td>
                <td class="form-title">
                    类目：
                </td>
                <td class="form-value">
                    <input v-model="sel_category" type="text" readonly="readonly" class="search type_name" placeholder="请选择类目"/>
                </td>
            </tr><tr>
                <td class="form-title">
                    品牌：
                </td>
                <td class="form-value">
                    <input v-model="sel_brand" type="text" readonly="readonly" class="search sel_brand" placeholder="请选择品牌"/>
                </td>
                <td class="form-title"></td>
                <td>
                </td>
                <td>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-default" v-on:click="searchs()">
                        <i class="icon-refresh align-top bigger-125"></i>
                        查询
                    </button>
                    <button class="btn btn-default" v-on:click="refresh()">
                        <i class="icon-reply align-top bigger-125"></i>
                        重置
                    </button>
                </td>
            </tr>
        </table>
    </div>

    <!-- 类目筛选模态框 -->
    <div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="categoryModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 600px;height: 500px;">
                <div class="modal-header" style="width: 100%;height: 50px;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="categoryModalLabel">商品类目筛选：</h4>
                </div>
                <div class="modal-body" style="width: 100%;height: 385px;overflow: auto;">
                    <div class="zTreeDemoBackground left" id="div_tree" style="">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
                <div class="modal-footer" style="width: 100%;height: 65px;">
                    <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="selectCategory()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 品牌筛选模态框 -->
    <div class="modal fade" id="brandModal" tabindex="-1" role="dialog" aria-labelledby="brandModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="brandModalLabel">商品品牌筛选：</h4>
                </div>
                <div class="modal-body">
                    <label class="checkbox-inline" v-for="site in brand_data">
                        <input type="checkbox" v-bind:value="site.id" v-bind:flog="site.name">{{site.name}}
                    </label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="selectBrand()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">商品详情:</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <table>
                            <tr>
                                <td class="form-title1">
                                    商品封面图：
                                </td>
                                <td>
                                    <img :src="src + product_data.image">
                                </td>
                            </tr>
                            <tr>

                                <td class="form-title1">
                                    商品名称：
                                </td>
                                <td class="form-value">
                                    <input v-model="product_data.name" style="position: absolute;width: 457px;top: 98px;"  readonly="readonly" type="text" class="search form-control" placeholder="请输入商品名称"/>
                                </td>
                            </tr>
                            <tr>

                                <td class="form-title1">
                                    分类：
                                </td>
                                <td class="form-value">
                                    <input v-model="product_data.type"  style="position: absolute;width: 457px;top: 149px;" readonly="readonly" type="text" class="search form-control"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="form-title1">
                                    店铺名称：
                                </td>
                                <td class="form-value">
                                    <input v-model="product_data.sname" readonly="readonly" type="text" class="search form-control" placeholder="请输入店铺名称"/>
                                </td>
                                <td class="form-title1">
                                    库存：
                                </td>
                                <td class="form-value">
                                    <input v-model="product_data.stock" readonly="readonly" type="text" class="search form-control" placeholder="请输入库存"/>
                                </td>
                            </tr>

                            <tr>
                                <td class="form-title1">
                                    是否含税：
                                </td>
                                <td class="form-value">
                                    <input v-model="product_data.is_include_tax" readonly="readonly" type="text"
                                           class="search form-control"/>
                                </td>
                                <td class="form-title1">
                                    产地：
                                </td>
                                <td class="form-value">
                                    <input v-model="product_data.origin" readonly="readonly" type="text"
                                           class="search form-control"/>
                                </td>
                            </tr>
                        </table>
                        <br/>
                        <p style="font-size: 14px;width: 100px;text-align: right">商品规格：</p>
                        <table class="guige_table" style="font-size: 14px;">
                            <thead>
                            <tr>
                                <td>规格</td>
                                <td>单价</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="value in product_data.spec_info">
                                <td>{{value.specification}}</td>
                                <td>{{value.price}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="refuseModal" tabindex="-1" role="dialog" aria-labelledby="refuseModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="refuseModalLabel">拒绝理由:</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <table>
                            <tr>
                                <td class="form-title">
                                    拒绝理由：
                                </td>
                                <td class="form-value">
                                    <textarea v-model="message" cols="60" rows="5" placeholder="拒绝理由"></textarea>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="refuseProduct()">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="table-responsive" style="background:white;margin-top: 0px;">
    <table class="table" id="user_table"></table>
</div>

<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/supplies/vue-validator.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/supplies/ztree/jquery.ztree.all.min.js"></script>
<script rel="script" src="__JS__/supplies/layer/layer.js"></script>
<script>
    var search = {'web_type':'PRO_AUTH'};


    var setting = {
        view: {
            selectedMulti: false
        },
        check: {
            enable:true,
            chkboxType: { "Y": "s", "N": "p" }
        },
        async: {
            enable: true,
            url: "{:url('admin/Product/getProductTypeInfo')}",
            autoParam: ["name", "nameEn"],
            otherParam: { "otherParam": "zTreeAsyncTest" },
            dataFilter: filter
        },
        callback: {
            beforeClick: beforeClick,
            beforeAsync: beforeAsync,
            onAsyncError: onAsyncError,
            onAsyncSuccess: onAsyncSuccess
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }
    function beforeClick(treeId, treeNode) {
        if (!treeNode.isParent) {
            {
            }
        } else {
            return true;
        }
    }
    var log, className = "dark";
    function beforeAsync(treeId, treeNode) {

        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
        return true;
    }
    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        showLog("[ " + getTime() + " onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        showLog("[ " + getTime() + " onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }

    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    function refreshNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            type = e.data.type,
            silent = e.data.silent,
            nodes = zTree.getSelectedNodes();
        if (nodes.length == 0) {
            alert("请先选择一个父节点");
        }
        for (var i = 0, l = nodes.length; i < l; i++) {
            zTree.reAsyncChildNodes(nodes[i], type, silent);
            if (!silent) zTree.selectNode(nodes[i]);
        }
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);
        $(".type_name").on("click",function(){
            $('#categoryModal').modal({
                keyboard: true
            });
                $.ajax({
                    url: '{:url("apishop/Product/getProductType")}',
                    type: "POST",
                    data: {},
                    success: function (data) {
                        vm.category_data = data.data;
                    }
                })
        })
        $(".sel_brand").on("click",function(){
            $('#brandModal').modal({
                keyboard: true
            });
            $.ajax({
                url: '{:url("admin/Product/getThreeBrand")}',
                type: "POST",
                data: {},
                success: function (data) {
                    vm.brand_data = data.data;
                }
            })
        })
    });
    var tableheight = document.documentElement.clientHeight - 96;
    // 用户管理
    $('#user_table').bootstrapTableEx({
        height: tableheight,
        url: '{:url("admin/Product/getAuthProduct")}',
        columns: [
            {
                checkbox: true
            }, {
                field: 'id',
                align: 'center',
                title: '序号',
                width: 120
            }, {
                field: 'image',
                align: 'center',
                title: '封面',
                formatter: function (val, row, index) {
                    if(val)
                    {
                        return "<img src='"+oss_url + val + "'>"
                    }
                    else
                    {
                        return "<img src='__IMG__/supplies/sh.png'>"
                    }
                }
            }, {
                field: 'name',
                align: 'center',
                title: '商品名称'
            }, {
                field: 'specification',
                align: 'center',
                title: '规格'
            }, {
                field: 'price',
                align: 'center',
                title: '单价',
                // formatter: function (val, row, index) {
                //     return val ;
                // }
            }, {
                field: 'stock',
                align: 'center',
                title: '库存',
                formatter: function (val, row, index) {
                    return val + "kg";
                }
            }, {
                field: 'category_id',
                align: 'center',
                title: '分类',
//                formatter: function (val, row, index) {
//                    if (val == 1) {
//                        return "肉类";
//                    } else if (val == 2) {
//                        return "蔬菜类";
//                    }
//                }
            }, {
                field: 'is_include_tax',
                align: 'center',
                title: '是否含税',
                formatter: function (val, row, index) {
                    if (val == 1) {
                        return "是";
                    } else {
                        return "否";
                    }
                }
            }, {
                field: 'origin',
                align: 'center',
                title: '产地'
            }, {
                title: '操作',
                align: 'center',
                width: 260,
                formatter: operateFormatter
            }
        ],

        queryParams: function (params) {
            var param = {
                search: search,
                pageSize: params.pageSize,
                pageNumber: params.pageNumber
            };
            return param;
        },
        responseHandler: function (res) {
            if (res.data) {
                return {
                    rows: res.data,
                    total: res.count
                };
            }
        }
    });

    // 详情按钮
    function operateFormatter(val, row, index) {

        var divStr = "<div class='form-inline'>"
        var detailStr = "<a href='javascript:void(0);'  class='detail_a' onclick='detailUser(1," + row.id + ")'>查看详情</a>&nbsp;&nbsp;" +
            "<a href='javascript:void(0);'  class='detail_a' onclick='sucPro(1," + row.id + ")'>通过</a>&nbsp;&nbsp;" +
            "<a href='javascript:void(0);'  class='detail_a' onclick='refuseModal(1," + row.id + ")'>拒绝</a>";

        divStr += detailStr;
        divStr += "</div>";
        return divStr;
    }

    //用户详细
    function detailUser(index, id) {
        $('#exampleModal').modal({
            keyboard: true
        })
        vm.productDetail(index,id)
    }

    function refuseModal(index, id) {
        $('#refuseModal').modal({
            keyboard: true
        })
        vm.id = id;
    }


    // 品牌筛选
    function brandFiltrate() {
        $('#brandModal').modal({
            keyboard: true
        })
    }

    function sucPro(index , id) {
        vm.successProduct(id);
    }

    vm = new Vue({
        el: '#content',
        data : {
            src : oss_url,
            id:'',
            category_data: [],
            search: {
                web_type : "PRO_AUTH",
                category: {
                    brand_ids: [],
                    type : "",
                    sel_cate_ids :"",
                },
            },
            brand_data: [],
            sel_cate_ids: [],
            sel_category: [],
            sel_brand: [],
            brand_ids: [],
            product_data: [],
            message:'',
            type_name : "",
        },
        methods: {
            selectCategory: function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodes = zTree.getCheckedNodes();
                // this.type_name = nodes[0].name;
                this.sel_category = [];
                var arr = [];
                this.search.category.sel_cate_ids = [];
                for (var i=0 ; i<nodes.length ; i++)
                {
                    this.search.category.sel_cate_ids.push(nodes[i].id);
                    arr.push(nodes[i].name);
                }
                this.search.category.sel_cate_ids = this.search.category.sel_cate_ids.join(',');
                this.sel_category = arr.join('、');
            },
            selectBrand: function () {
//                vm.sel_brand = [];
                var brand_arr = [];
                this.search.category.brand_ids = [];
                $('#brandModal :checked').each(function () {
                    vm.search.category.brand_ids.push($(this).val());
                    brand_arr.push($(this).attr('flog'));
                });
                vm.sel_brand = brand_arr.join('、');
            },
            searchs: function (index) {
                search = vm.search;
                if (index == 1) {
                    $("#user_table").bootstrapTable('refresh');
                } else {
                    $("#user_table").bootstrapTable('refresh');
                }
            },
            productDetail: function (index, id) {
                $.ajax({
                    url: '{:url("admin/Product/getProductInfo")}',
                    type: "POST",
                    data: {'id': id},
                    success: function (data) {
                        if (data.status == 200) {
                            vm.product_data = data.data;
                            if (data.data.is_include_tax == 0) {
                                vm.product_data.is_include_tax = '否';
                            }
                            else {
                                vm.product_data.is_include_tax = '是';
                            }
                        }
                        else {
                            vm.product_data = {};
                        }
                    }
                })
            },
            refuseProduct : function () {
                $.ajax({
                    url: '{:url("admin/Product/productAuth")}',
                    type: "POST",
                    data: {'id': vm.id,'type':2,'message':vm.message},
                    success: function (data) {
                        layer.confirm(data.msg, {
                            time: 20000, //20s后自动关闭
                            btn: ['关闭']
                        },function () {
                            location.reload();
                        });
                    }
                })
            },
            successProduct : function (id) {
                layer.config({
                    skin:"my_skin"
                })
                layer.confirm('您确定通过审核吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.ajax({
                        url: '{:url("admin/Product/productAuth")}',
                        type : "POST",
                        data:{'id':id, 'type':1},
                        success : function (data) {
                            layer.confirm(data.msg, {
                                btn: ['关闭']
                            },function () {
                                $.ajax({
                                    url: '{:url("admin/User/getMessageCount")}',
                                    type : 'POST',
                                    success: function (res) {

                                    }
                                });
                                location.reload();
                            });
                        }
                    })
                });
            },
            refresh : function () {
                this.search = {
                    web_type : "PRO_AUTH",
                        category: {
                        brand_ids: [],
                            type : "",
                            sel_cate_ids :"",
                    },
                };
                this.sel_category = '';
                this.sel_brand = '';
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.checkAllNodes(false);
            }
        }
    });
</script>
</body>
</html>